<template>
  <div>
    <div class="content">
     <router-view></router-view>
    </div>
    <van-tabbar route inactive-color="#c9c8cc" active-color="c9c8cc">
      <van-tabbar-item replace to="/articlepage" size="40" >
        <span>首页</span>
        <template #icon="props">
          <img :src="props.active ? require('@/assets/icons/home/index-active.svg') : require('@/assets/icons/home/index-default.svg')" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item replace to="/healthypage" icon="column"><span>健康百科</span>
        <template #icon="props">
          <img :src="props.active ? require('@/assets/icons/home/article-active.svg') : require('@/assets/icons/home/article-default.svg')" />
        </template></van-tabbar-item>
      <van-tabbar-item replace to="/messagepage" icon="bell"><span>消息通知</span>
        <template #icon="props">
          <img :src="props.active ? require('@/assets/icons/home/notice-active.svg') : require('@/assets/icons/home/notice-default.svg')" />
        </template></van-tabbar-item>
      <van-tabbar-item replace to="/mypage" icon="contact"><span>我的</span>
        <template #icon="props">
          <img :src="props.active ? require('@/assets/icons/home/mine-active.svg') : require('@/assets/icons/home/mine-default.svg')" />
        </template></van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  name: 'IndexPage',
  data () {
    return {
      active: 0

    }
  }

}
</script>

<style lang="less" scoped>
.icon-index-active{
  font-size: 18px;
  .texts{
    font-size: 12px;
    color: #646566;
  }
}
</style>
